<template>
	<view class="page-container">
		<view class="detail-header">
			<image class="detail-header-logo" src="/static/imgs/goods-pic.png">
			</image>
			<view class="detail-header-right">
				<view class="detail-header-title">
					<text>我的优惠福利</text>
				</view>
				<view class="detail-header-desc">
					<text>领取到账微信卡包</text>
				</view>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="order-info">
			<view class="info-item">
				<text>商品总价</text>
				<text style="color: #999">¥30</text>
			</view>
			<view class="info-item">
				<text>优惠</text>
				<text style="color: blue">- ¥{{ "20.05" }}</text>
			</view>
			<view class="info-item">
				<text>邮费</text>
				<text>免邮</text>
			</view>
			<view class="info-item">
				<text>实付</text>
				<text style="color: red">¥{{ orderInfo.order_total_amount || 0 }}</text>
			</view>
			<view class="info-item">
				<text>订单号</text>
				<text>{{ orderInfo.title }}</text>
			</view>
			<view class="info-item">
				<text>下单时间</text>
				<text>{{ orderInfo.created_at }}</text>
			</view>
			<view class="info-item">
				<text>支付时间</text>
				<text>{{ orderInfo.pay_time }}</text>
			</view>
		</view>

		<!-- 价格信息 -->
		<view class="tips">
			<view class="tips-title">使用说明</view>
			<view>
				本权益卡以支付抵扣券包的形式给到，购买后需自行领取券包抵扣。支付抵扣券分多张多次使用，非一次性全额抵扣，领取后到账微信卡包。
				可用场景覆盖全国260+城市，电单车充电、充电宝充电、停车、公交地铁、话费充值、电影娱乐、百货购物等，微信支付的时候可抵扣
			</view>
		</view>
		<view class="bottom-btns">
			<wd-button plain @click="handleRefund(orderInfo.id)" class="button-class">
				退款申请
			</wd-button>
			<wd-button @click="handleCallTel" class="button-class">联系客服</wd-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		apiOrderDetails
	} from "@/api/order";
	//页面加载
	onLoad((options) => {
		if (options.order_id) {
			getOrderDetails(options.order_id);
		}

	});
	//客服电话
	const handleCallTel = () => {
		uni.makePhoneCall({
			phoneNumber: "4008381086",
			success: (res) => {},
			fail: (res) => {},
			complete: (res) => {},
		});
	}
	const orderInfo = ref({});
	const getOrderDetails = async (orderId) => {
		
		orderInfo.value = await apiOrderDetails({
			orderId:orderId
		});
	}
	
	//去退款
	const handleRefund = (id) =>{
		uni.navigateTo({
			url: '/pages/after-sales/index?order_id=' + id
		});
	}
</script>

<style lang="scss" scoped>
	.page-container {
		padding: 0;
		min-height: calc(100vh - 160rpx);
		background: #f8f8f8 url(/static/imgs/index-top-bg.png) no-repeat;
		background-size: contain;
		padding-top: 160rpx;
	}

	.detail-header {
		display: flex;
		background: #fff;
		border-radius: 12px;
		margin: 10px;
		padding: 10px;

		&-logo {
			width: 120px;
			height: 100px;
			margin-right: 10px;
		}

		&-title {
			font-size: 18px;
			margin-top: 20px;
		}

		&-desc {
			color: #999;
			font-size: 14px;
			padding-top: 6px;
		}
	}

	.order-info {
		margin-top: 20rpx;
		background: #fff;
		padding: 20rpx;
		margin: 10px;
		border-radius: 12px;

		.info-item {
			display: flex;
			justify-content: space-between;
			font-size: 32rpx;
			color: #666;
			padding: 15rpx 0;
		}
	}

	.tips {
		padding: 20rpx;
		line-height: 1.6;
		font-size: 26rpx;

		&-title {
			margin-bottom: 10rpx;
			font-size: 28rpx;
		}
	}

	.bottom-btns {
		padding: 20rpx;
		display: flex;
		justify-content: flex-end;

		.button-class {
			width: 45%;
		}
	}
</style>